<template>
    <svg class="icon" aria-hidden="true" @click="chectText">
        <use xlink:href="#icon-fanye"></use>
    </svg>
    <div class="button_box">
     <el-form ref="smsform" :model="smsformData" status-icon :rules="Smsrules" label-width="120px"
       class="demo-smsformData">
       <el-form-item label="手机号" prop="phonenum" class="phonenum-input-phonenum">
         <el-input v-model.number="smsformData.phonenum" maxlength='11'/>
         <button class="Verification_Code" @click="sendSms">{{desc}}</button>
       </el-form-item>
       <el-form-item label="验证码" prop="identifyingcode" class="identifyingcode-input-name">
         <el-input v-model="smsformData.identifyingcode" type="text" autocomplete="off" maxlength='5'/>
       </el-form-item>
       <el-form-item class="font_input">
         <el-button type="primary" @click="submitForm(smsform)">提交</el-button>
       </el-form-item>
     </el-form>
   </div>
</template>
<script setup>
import { reactive, ref,onUnmounted } from 'vue'
// 引入校验函数
import { Smsrules, useSubmitForm } from "../../../cpmposition/login/validata"
import {useUser} from "../../../store/allstore"
import {storeToRefs} from "pinia"
// 表单校验成功后,回调的方法
let validataSuccess = () => {
 console.log('校验成功')
}
// 表单校验失败后,回调的方法
let validataFailed = () => {
 console.log('校验失败')
}
//使用useSubmitForm
let submitForm = useSubmitForm(validataSuccess, validataFailed)

// 注入到表单的数据
const smsformData = reactive({
 identifyingcode: '',
 phonenum: '',
})


let desc=ref('点击发射核弹')

//引用定时器
let timeDownInterval=null
let isClick=false
let sendSms=()=>{
  if(!isClick){
    timeDownInterval=timeDown(10,desc,'秒后再次发射',desc.value,()=>{
      isClick=false
    })
  }
  isClick=true
}

/**
 * @param {Number} timer 倒计时事件
 * @param {Objcet} param 需要变更的响应式变量
 * @param {String} msg  读秒后的文字
 * @param {String} endMsg  倒计时结束后的文字
 * @param {Function} cb  倒计时结束后的回调函数
 */
let timeDown=(timer=5,param,msg,endMsg,cb)=>{
  let count =timer
  param.value=(count+"").padStart(2,0)+msg
  let interval=setInterval(()=>{

    count--

  if(count<=0){
    clearInterval(interval)
    param.value=endMsg
    cb && cb()
    return
  }
  param.value=(count+"").padStart(2,0)+msg
},1000)
return interval
}

onUnmounted(()=>{
  if(timeDownInterval)clearInterval(timeDownInterval)
})

</script>
<style lang="scss" scoped>
.identifyingcode-input-name {
 :deep(.el-input) {
   width: 250px;
   height: 40px;
 }

 :deep(.el-form-item__label) {
   color: white;
   font-size: 16px;
 }

}

.phonenum-input-phonenum {
 :deep(.el-input) {
   width: 125px;
   height: 40px;
   // border-radius: 0;
 }

 :deep(.el-form-item__label) {
   color: white;
   font-size: 16px;

 }

 :deep(.el-input__wrapper) {
   border-radius: 4px 0 0 4px;
   box-shadow:none
 }
}



.font_input {
 color: red;

 :deep(.el-button) {
   width: 250px;
   height: 40px;
   margin-top: 20px;
   font-size: 16px;
 }
}

.button_box {
 padding-right: 50px;

 // display: flex;
 // flex-direction: column;
 // justify-content: center;
 // align-content: center;
}



.Verification_Code{
    text-decoration:underline;
    font-size: 13px;
 width: 105px;
 height: 40px;
 background-color: rgb(234, 233, 233);
 border: none;
 cursor:pointer;
 border-radius: 0 4px 4px 0
}
.icon {
       width: 4em; height: 4em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
       position: absolute;
    top: 0;
    right: 0;
    cursor: pointer
    }
</style>